<template>
  <div class="form-setting-wrap">
    <el-form class="form-setting">
      <el-form-item label="主题颜色: " label-width="80px">
        <el-input type="color" v-model="currentTheme"></el-input>
      </el-form-item>
      <el-form-item label="下载路径: " label-width="80px">
        <el-input
          type="text"
          v-model="currentPath"
          @click.native="setSavePath"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="form-bottom">
      <el-button type="primary" @click="saveSetting">确定</el-button>
    </div>
  </div>
</template>

<script>
import { remote, ipcRenderer } from "electron";
import Mixin from "@/mixins";
export default {
  name: "setting",
  data() {
    return {
      currentTheme: '',
      currentPath: '',
      theme: "",
      path: "",
    };
  },
  watch:{
    theme(theme) {
      this.currentTheme = theme;
    }
  },
  mounted() {
    this.path = this.currentPath = remote.app.getPath("downloads");
  },
  mixins: [Mixin],
  methods: {
    setSavePath() {
      const res = remote.dialog.showOpenDialogSync({
        properties: ["openDirectory"],
      });

      if (Array.isArray(res)&&res.length) {
        this.currentPath = res[0];
      }
    },
    saveSetting() {
      this.theme = this.currentTheme;
      this.path = this.currentPath;
      remote.app.setPath("downloads", this.path);
      this.$emit('setted');
    }
  },
};
</script>

<style lang="scss">
.form-setting-wrap {
  position: relative;
  height: 100%;
}

.form-setting {
  padding-right: 10px;
}

.form-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border-top: 1px solid lightgrey;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
</style>
